<script setup lang="ts">
import axios from 'axios';
import { ref, watch } from 'vue';
import { ArticleItem, ArticleResData} from '../types/data'
import {useChannelStore} from '../store/channel'

const store = useChannelStore()

// 1. 接收channelId数据
// const props = defineProps<{
//   channelId: number
// }>()
const articles = ref<ArticleItem[]>([])
// 2. 监听channelId的变化,发送接口, 初始化的时候就默认请求一次

watch(() => store.channelId, async () => {
  const res = await axios.get<ArticleResData>(
    `http://geek.itheima.net/v1_0/articles`,
      {
        params: {
          channel_id: store.channelId,
          timestamp: Date.now(),
        },
      },)
      articles.value = res.data.data.results
},{
  immediate: true
})
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{item.title}}</p>
      <img class="img" v-for="(src,i) in item.cover.images" :src="src" alt="">
      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
